<template>
  <!-- 轮播图容器 -->
  <div class="carousel-container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <!-- 轮播区域 -->
    <div class="carousel-track">
      <!-- 轮播卡片 -->
      <div class="carousel-card" v-for="(item, index) in items" :key="index">
        <img class="card-item" :src="item.image" alt="" />
      </div>
    </div>
    <!-- 添加v-show控制箭头显示 -->
    <div class="prve" v-show="showArrows" @click="prve">
      <el-icon>
        <ArrowLeft />
      </el-icon>
    </div>
    <div class="next" v-show="showArrows" @click="next">
      <el-icon>
        <ArrowRight />
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

const props = defineProps({
  items: {
    type: Array,
    required: true
  },
})

const currentIndex = ref(0) // 当前显示的卡片索引
const showArrows = ref(false) // 添加控制箭头显示的状态
const autoPlayTimer = ref(null) // 添加自动播放定时器

// 自动播放函数
const startAutoPlay = () => {
  autoPlayTimer.value = setInterval(() => {
    next()
  }, 3000) // 每3秒切换一次
}

// 停止自动播放
const stopAutoPlay = () => {
  if (autoPlayTimer.value) {
    clearInterval(autoPlayTimer.value)
    autoPlayTimer.value = null
  }
}

onMounted(() => {
  visibeCards()
  startAutoPlay() // 组件挂载时启动自动播放

  // 添加页面可见性变化监听
  document.addEventListener('visibilitychange', handleVisibilityChange)
})

// 组件卸载时清除定时器和事件监听
onUnmounted(() => {
  stopAutoPlay()
  document.removeEventListener('visibilitychange', handleVisibilityChange)
})

// 处理页面可见性变化
const handleVisibilityChange = () => {
  if (document.visibilityState === 'hidden') {
    stopAutoPlay()
  } else {
    startAutoPlay()
  }
}

// 鼠标进入时停止自动播放，离开时重新开始
const handleMouseEnter = () => {
  showArrows.value = true
  stopAutoPlay()
}

const handleMouseLeave = () => {
  showArrows.value = false
  startAutoPlay()
}


// 布局函数
function visibeCards() {
  const startLength = props.items.length;
  const cardItem = document.querySelectorAll('.card-item');
  const xOffsetStep = 130; // 增加偏移量步长
  const scaleStep = 0.6;
  const opacityStep = 0.7;

  for (let i = 0; i < startLength; i++) {
    const item = cardItem[i];
    // 计算相对当前卡片的索引
    let relativeIndex = (i - currentIndex.value + startLength) % startLength;

    // 只处理当前索引及其左右两侧的卡片
    if (Math.abs(relativeIndex - Math.floor(startLength / 2)) > 1) {
      item.style.display = 'none'; // 隐藏其他卡片
      continue;
    } else {
      item.style.display = 'block'; // 显示当前卡片
    }



    // 计算方向（左或右）
    let sign = Math.sign(relativeIndex - Math.floor(startLength / 2));

    // 计算x轴偏移量
    let xOffset = (relativeIndex - Math.floor(startLength / 2)) * xOffsetStep;
    if (relativeIndex !== Math.floor(startLength / 2)) {
      xOffset = xOffset + 100 * sign;
    }

    // 计算缩放比例
    const scale = scaleStep ** Math.abs(relativeIndex - Math.floor(startLength / 2));
    // 计算Y轴旋转角度
    const rotateY = relativeIndex === Math.floor(startLength / 2) ? 0 : 15 * -sign;
    // 计算透明度
    const opacity = opacityStep ** Math.abs(relativeIndex - Math.floor(startLength / 2));

    // 应用变换效果
    item.style.transform = `translateX(${xOffset}px) scale(${scale}) rotateY(${rotateY}deg)`;
    // 设置z-index
    item.style.zIndex = startLength - Math.abs(relativeIndex - Math.floor(startLength / 2));
    // 设置透明度
    item.style.opacity = opacity;

    // 设置过渡效果
    item.style.transition = `transform 1.5s`
  }
}


onMounted(() => {
  visibeCards()
})
const next = () => {
  currentIndex.value = (currentIndex.value + 1) % props.items.length;
  visibeCards()
  const track = document.querySelector('.carousel-track');
  track.style.transition = 'transform 0.5s ease';
  // 500ms后移除过渡效果
  setTimeout(() => {
    track.style.transition = 'none';
  }, 500);
}

const prve = () => {
  // 计算上一张卡片的索引，使用模运算实现循环
  currentIndex.value = (currentIndex.value - 1 + props.items.length) % props.items.length;
  visibeCards();
  // 添加平滑过渡效果
  const track = document.querySelector('.carousel-track');
  track.style.transition = 'transform 0.5s ease';
  // 500ms后移除过渡效果
  setTimeout(() => {
    track.style.transition = 'none';
  }, 500);
}
</script>

<style lang="scss" scoped>
.carousel-container {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  position: relative;
  padding: 20px 0; // 减少内边距
  // background-color: #f5f5f5; // 更柔和的背景色// 改为深色背景，更显高级感
  border-radius: 20px; // 添加圆角
  // box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); // 添加阴影效果

  .carousel-track {
    position: relative;
    width: 387px; // 缩小宽度
    height: 247px; // 缩小高度
    margin: 0 auto;
    perspective: 1000px; // 添加透视效果

    .carousel-card {
      position: absolute;
      width: 100%;
      height: 100%;
      transition: all 0.5s ease;

      .card-item {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); // 添加卡片阴影
        transition: transform 0.5s ease, opacity 0.5s ease; // 添加过渡效果
      }
    }
  }

  .prve,
  .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;

    .el-icon {
      font-size: 24px;
      transition: transform 0.3s ease;
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.7);
      .el-icon {
        transform: scale(1.2);
      }
    }
  }

  .prve {
    left: 20px;
  }

  .next {
    right: 20px;
  }
}
</style>